<h1 mat-dialog-title class="header">
  {{ 'Ports' | translate }}
  <button
    mat-icon-button
    [ixTest]="['close-dialog']"
    [attr.aria-label]="'Close Dialog' | translate"
    [matDialogClose]="false"
  >
    <ix-icon name="cancel"></ix-icon>
  </button>
</h1>

<mat-dialog-content class="content">
  <ix-table
    class="table"
    [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
    [emptyConfig]="emptyService.defaultEmptyConfig(dataProvider.emptyType$ | async)"
  >
    <thead
      ix-table-head
      [columns]="columns"
      [dataProvider]="dataProvider"
    ></thead>
    <tbody
      ix-table-body
      [columns]="columns"
      [dataProvider]="dataProvider"
      [isLoading]="!!(dataProvider.isLoading$ | async)"
    ></tbody>
  </ix-table>

  <div class="controls">
    <button
      mat-button
      [ixTest]="['add-new']"
      (click)="onAdd()"
    >
      <ix-icon name="add"></ix-icon>
      {{ 'Add New' | translate }}
    </button>
  </div>
</mat-dialog-content>
